<template>
  <div class="container">
    <div class="select-container">
      <div class="select-list">
        <span class="active">全防具</span>
        <span>1星防具</span>
        <span>2星防具</span>
        <span>3星防具</span>
        <span>3星防具</span>
        <span>4星防具</span>
        <span>5星防具</span>
        <span>6星防具</span>
        <span>7星防具</span>
        <span>8星防具</span>
      </div>
    </div>
    <div class="card">
      <div class="list-container">
        <div class="ar-suit" style="padding:0;margin:0px">
          <div class="ar-cell ar-name">
            名称
          </div>
          <div class="ar-cell ar-def">
            防御
          </div>
          <div class="ar-cell ar-attr">
            火
          </div>
          <div class="ar-cell ar-attr">
            水
          </div>
          <div class="ar-cell ar-attr">
            雷
          </div>
          <div class="ar-cell ar-attr">
            冰
          </div>
          <div class="ar-cell ar-attr">
            龙
          </div>
          <div class="ar-cell ar-skill">
           技能
          </div>
        </div>
        <div class="ar-suit"><div class="ar-cell ar-name">
            的可用雷狼龙套装
          </div>
          <div class="ar-cell ar-def">
            422/800
          </div>
          <div class="ar-cell ar-attr">
            43
          </div>
          <div class="ar-cell ar-attr">
            22
          </div>
          <div class="ar-cell ar-attr">
            45
          </div>
          <div class="ar-cell ar-attr">
            -66
          </div>
          <div class="ar-cell ar-attr">
            1
          </div>
          <div class="ar-cell ar-skill">
           力の解放+2
           力の解放+2
           力の解放+2
          </div>
        </div>
        <!-- suit container -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      userinfo: {
        avatarUrl: '../../../static/img/unlogin.png',
        nickName: '点击登录'
      }
    }
  }
}
</script>
<style>
.select-container{
  overflow: auto;
  border-bottom: 1px solid #efefef;
}
.select-list{
  white-space: nowrap;
}
.select-list span {
  display: inline-block;
  padding: 8px 10px;
  margin: 0 4px;
  font-size: 16px;
  color: #575757;
}
.select-list span.active{
  border-bottom: 3px solid #1aad19;
  color: #212121;
}
.list-container{
  overflow: auto;
}
.ar-suit{
  word-break: break-all;
  white-space: nowrap;
}

.ar-cell {
  font-size: 12px;
  line-height: 12px;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
  padding:14px 5px 8px;
  border-bottom: 1px solid #eee;
}
.ar-level {
  width: 30px;
  /* border: 1px solid brown; */
}
.ar-level i{
  font-size: 22px;
}
.ar-name{
  width: 100px;
  /* border: 1px solid goldenrod; */
}
.ar-def{
  width: 60px;
  /* border: 1px solid red; */
}
.ar-attr{
  width: 24px;
}
.ar-skill{
  min-width: 150px;
  text-align: left;
}
.o-color div{
  background-color: #eeffff;
}
</style>


